<!--
 * @Date: 2023-02-21 13:07:37
 * @LastEditTime: 2023-02-21 17:35:10
 * @FilePath: /hash-guess-game/src/components/Card/Card.vue
 * 介绍:
-->
<script lang="ts" setup>
const slot = useSlots();
const props = withDefaults(
  defineProps<{
    /**背景颜色 */
    bg?: string;
    gapText?: string;
    gapMode?: "left" | "center" | "right";
    gap?: "solid" | "dashed";
  }>(),
  {
    gap: "solid",
  }
);
</script>

<template>
  <div :style="{ background: props.bg }" class="Card bevel">
    <slot name="header"></slot>
    <template v-if="slot.header && props.gap">
      <van-divider
        v-if="!props.gapText"
        :content-position="gapMode"
        :dashed="props.gap == 'dashed'"
      />
      <van-divider
        v-else
        :content-position="gapMode"
        :dashed="props.gap == 'dashed'"
      >
        {{ props.gapText }}
      </van-divider>
    </template>
    <slot></slot>
  </div>
</template>

<style lang="less" scoped>
.Card {
  padding: var(--gap-md);
  --van-divider-margin: var(--gap-sm) 0;
  --box-show-C: rgba(255, 255, 255, 0.15);
  background-color: var(--C-O2);
  border-radius: 12rem;
}
</style>
